import React from 'react';
import { Button, Card, Divider, Form, Input, Popconfirm, Table } from 'antd';
import { TablePagination } from 'vv-frontend-components';
import Locale from '@/utils/locale';
import styles from '@/pages/Setting/SysMenu/index.less';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { history, connect } from 'umi';

@connect(({ SysMenuManageModels, dictionary, loading }) => ({
    SysMenuManageModels,
    dictionary,
    loading: loading.global
}))
class SysPage extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            inputValue: ''
        };
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({
            type: 'SysMenuManageModels/fetchPageMenu',
            payload: {}
        });
    }

    paginationData = pageSize => {
        const { dispatch } = this.props;
        dispatch({
            type: 'SysMenuManageModels/fetchPageMenu',
            payload: {
                pageSize,
                current: 1
            }
        });
    };

    tableData = e => {
        const { dispatch } = this.props;
        dispatch({
            type: 'SysMenuManageModels/fetchPageMenu',
            payload: {
                pageNo: e.current,
                menuName: this.state.inputValue
            }
        });
    };

    render() {
        const handleSearch = e => {
            e.preventDefault();
            const { dispatch } = this.props;
            dispatch({
                type: 'SysMenuManageModels/fetchPageMenu',
                payload: {
                    menuName: this.state.inputValue
                }
            });
        };
        const {
            SysMenuManageModels: { sysMenu },
            loading
        } = this.props;

        const { inputValue } = this.state;

        const columns = [
            {
                title: '菜单Id',
                dataIndex: 'id',
                width: '10%',
                key: 'id'
            },
            {
                title: '上级菜单Id',
                dataIndex: 'parentId',
                width: '10%',
                key: 'parentId'
            },
            {
                title: '菜单名称',
                dataIndex: 'menuName',
                key: 'menuName',
                width: '10%',
                render: text => (
                    <span
                        style={{
                            width: '200px',
                            whiteSpace: 'nowrap',
                            overflow: 'hidden',
                            textOverflow: 'ellipsis',
                            marginBottom: '0'
                        }}
                        title={text}
                    >
                        {text}
                    </span>
                )
            },
            {
                title: '菜单code',
                dataIndex: 'url',
                width: '10%',
                key: 'url'
            },
            {
                title: '菜单类型',
                dataIndex: 'type',
                width: '10%',
                key: 'type',
                render: text => {
                    if (text === '1') {
                        return '目录';
                    }
                    if (text === '2') {
                        return '菜单';
                    }
                    if (text === '3') {
                        return '按钮';
                    }
                    if (text === '4') {
                        return '接口';
                    }
                    return '接口';
                }
            },
            {
                title: '菜单状态',
                dataIndex: 'visible',
                width: '10%',
                key: 'visible',
                render: text => (text === 0 ? '显示' : '隐藏')
            },
            {
                title: '权限',
                dataIndex: 'permission',
                key: 'permission',
                width: '20%'
            },
            {
                title: '操作',
                dataIndex: 'companyName',
                key: 'companyName',
                width: '20%',
                render: (text, record) => (
                    <span>
                        <a
                            href="#"
                            onClick={() => {
                                history.push({
                                    pathname: '/setting/sysMenuManage/editSysMenu',
                                    query: { id: record.id }
                                });
                            }}
                        >
                            编辑
                        </a>
                        <Divider type="vertical" />
                        <Popconfirm
                            title="你确定删除吗?"
                            onConfirm={() => {
                                console.log(record.id);
                            }}
                            okText="确定"
                            cancelText="取消"
                        >
                            <a href="#">删除</a>
                        </Popconfirm>
                    </span>
                )
            }
        ];

        return (
            <PageHeaderWrapper>
                <Card bordered={false} title="系统菜单管理页面">
                    <div className={styles.flex}>
                        <Form layout="inline" onSubmit={handleSearch}>
                            <Form.Item>
                                <Input
                                    onChange={value => {
                                        this.setState({ inputValue: value.target.value });
                                    }}
                                    value={inputValue}
                                    type="text"
                                    style={{ width: '100%' }}
                                    placeholder="请输入菜单名"
                                />
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" htmlType="submit">
                                    搜索
                                </Button>
                            </Form.Item>
                        </Form>
                        <div>
                            <Button
                                type="primary"
                                onClick={() => {
                                    history.push({ pathname: '/setting/sysMenuManage/addSysMenu' });
                                }}
                            >
                                新增菜单
                            </Button>
                        </div>
                    </div>
                    <Table
                        bordered={false}
                        columns={columns}
                        dataSource={sysMenu.rows}
                        onChange={e => {
                            this.tableData(e);
                        }}
                        loading={loading}
                        pagination={{
                            ...sysMenu,
                            showTotal: total => (
                                <TablePagination
                                    itemsName={Locale.set('items')}
                                    total={total}
                                    pageSize={sysMenu.pageSize}
                                    onChange={pageSize => {
                                        this.paginationData(pageSize);
                                    }}
                                />
                            )
                        }}
                    />
                </Card>
            </PageHeaderWrapper>
        );
    }
}

export default SysPage;
